<template>
  <div class="formDesign-content">
    <t-space direction="vertical" size="large" class="baseFrom">
      <t-form ref="baseForm" :rules="rules" labelAlign="top" :label-width="80">
        <t-form-item name="icon">
          <div class="iconComp">
            <div
              :key="baseFormData.color"
              class="iconCont"
              :style="{ backgroundColor: baseFormData.color }"
            >
              <span class="icFont">
                <icon-font :name="baseFormData.icon" size="large" />
              </span>
              <span class="icSet" @click="checkSelectOpenState">
                <icon-font name="edit-1" size="large" />
              </span>
            </div>
            <div v-show="iconSlelectShow" class="selectCont">
              <div class="iconSelectList">
                <div class="scorllBox">
                  <div
                    v-for="(item, index) in iconList"
                    :key="index"
                    class="iconList"
                    @click="iconSelect(item.stem)"
                  >
                    <div class="pt" style="padding: 10px">
                      <div><icon-font size="22px" :name="item.stem" /></div>
                      <span class="ft-12">{{ item.icon }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="colorSelectList">
                <div
                  v-for="(item, index) in colorOptions"
                  :key="index"
                  class="colList"
                  :class="{ act: baseFormData.color === item }"
                  :style="{ '--color': item }"
                  @click="colorSelect(item)"
                >
                  <span :style="{ background: item }"></span>
                </div>
              </div>
            </div>
          </div>
        </t-form-item>
        <t-form-item label="表单名称：" tips="最多20字" name="formTitle">
          <t-input v-model="baseFormData.formTitle"></t-input>
        </t-form-item>
        <t-form-item label="所在分组：" name="groupId">
          <t-select v-model="baseFormData.groupId">
            <t-option
              v-for="item in groupOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </t-select>
        </t-form-item>
        <t-form-item label="表单说明： " tips="最多100字" name="formDescribe">
          <t-textarea
            v-model="baseFormData.formDescribe"
            placeholder="请输入流程说明"
            clearable
            :autosize="{ minRows: 5, maxRows: 5 }"
          />
        </t-form-item>
      </t-form>
    </t-space>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, watch, onMounted } from 'vue'
import { IconFont, manifest } from 'tdesign-icons-vue-next'
import { useFormData } from '@/store'

const store = useFormData()
// 默认图标库的图标列表
const iconList = ref(manifest)
const iconSlelectShow = ref(false)
const checkSelectOpenState = () => {
  iconSlelectShow.value = !iconSlelectShow.value
}
const props = defineProps({
  initData: Object
})
// 颜色的选项卡
const colorOptions = ref([
  'var(--color-main)',
  '#ff0000',
  '#0ff000',
  '#00ff00',
  '#000ff0',
  '#0000ff'
])

// 表单数据
const baseFormData = reactive({
  icon: 'chart-bubble',
  color: 'var(--color-main)',
  fromType: '0',
  formTitle: '',
  groupId: '',
  formDescribe: ''
})

// 分组下拉
const groupOptions = reactive([
  { id: '1', name: '行政' },
  { id: '2', name: '财务' },
  { id: '3', name: '人事' },
  { id: '4', name: '其他' }
])

const rules = {
  formTitle: [{ required: true, message: '必填', type: 'blue' }],
  groupId: [{ required: true, message: '必填', type: 'blue' }]
}
// 选择颜色
const colorSelect = (val) => {
  baseFormData.color = val
  checkSelectOpenState()
}
// 选择图标
const iconSelect = (val) => {
  baseFormData.icon = val
  checkSelectOpenState()
}

onMounted(() => {
  // 初始赋值
  if (props.initData.baseFormData) {
    for (const key in store.getBaseFormData) {
      baseFormData[key] = store.getBaseFormData[key]
    }
  }
  // for (const key in store.getBaseFormData) {
  //   baseFormData[key] = store.getBaseFormData[key]
  // }
})
// 监听整个表单的输入 并写入pina
watch(
  () => baseFormData,
  (val) => {
    store.setBaseFormData(val)
  },
  { deep: true }
)
</script>
<style src="../index.less" scoped></style>
<style lang="less" scoped>
.baseFrom {
  min-height: calc(100vh - 250px);
  position: relative;
  left: 50%;
  padding: 30px;
  width: 800px;
  box-sizing: content-box;
  background: #fff;
  transform: translateX(-50%);
  // 下面是基础设置的图标组件的相关样式 - start
  .iconComp {
    position: relative;
    margin: auto;
    .iconCont {
      position: relative;
      width: 60px;
      height: 60px;
      line-height: 60px;
      border-radius: 4px;
      text-align: center;
      background-color: var(--color-main);
      .icFont {
        color: var(--color-white);
      }
      .icSet {
        position: absolute;
        cursor: pointer;
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        text-align: center;
        box-sizing: content-box;
        border-radius: 100%;
        right: -4px;
        bottom: -4px;
        color: var(--color-bk5);
        background: var(--color-white);
      }
    }
    .selectCont {
      border: solid 1px #ccc;
      position: absolute;
      z-index: 99;
      background: #fff;
      left: 70px;
      top: 70px;
      width: 460px;
      overflow-y: scroll;
      .iconSelectList {
        .scorllBox {
          display: flex;
          flex-wrap: wrap;
          text-align: center;
          height: 450px;
          overflow-y: scroll;
          .iconList {
            width: 90px;
            overflow: hidden;
          }
        }
      }
      .colorSelectList {
        position: relative;
        background: var(--color-wirte);
        border-top: solid 1px #f4f4f4;
        padding: 8px 10px;
        .colList {
          display: inline-block;
          cursor: pointer;
          width: 30px;
          height: 30px;
          padding: 7px;
          span {
            display: inline-block;
            width: 100%;
            height: 100%;
            border-radius: 10px;
          }
        }
        .act {
          position: relative;
          &::before {
            position: absolute;
            content: '';
            display: inline-block;
            top: 3px;
            left: 3px;
            width: 22px;
            height: 22px;
            border-radius: 35px;
            border: solid 1px var(--color);
          }
        }
      }
    }
  }
}
</style>
